import React from 'react';
import './History.css';

export interface HistoryItem {
    id: number;
    product_id: string;
    profit_value: number;
    profit_type: 'fixed' | 'cost' | 'price';
    cost: number;
    coupon: number;
    off: number;
    y: number;
    weight: number;
    withdrawal_fee_rate: number;
    platform_commission_rate: number;
    sfp_fee_rate: number;
    talent_commission_rate: number;
    transaction_fee_rate: number;
    vat_rate: number;
    bonus_cashback_rate: number;
    logistics_cost_per_10g: number;
    exchange_rate: number;
    buyer_shipping_fee: number;
    created_at: string;
    type: 'pricing' | 'adjustment';
}

interface Props { 
  onSearch: () => void, 
  onSearchChange: (e: string) => void, 
  onHistoryTypeChange: (e: HistoryType) => void, 
  dataSource?: HistoryItem[],
  historyError?: string;
  historyType?: string;
  searchId?: string;
}

export type HistoryType = 'all' | 'pricing' | 'adjustment';

const History: React.FC<Props> = (props) => {

    const { 
      searchId, 
      dataSource, 
      historyError, 
      historyType, 
      onSearch,
      onSearchChange,
      onHistoryTypeChange,
    } = props;

    const handleSearch = (e: React.FormEvent) => {
        e.preventDefault();
        onSearch();
    };

    const formatDate = (dateString: string) => {
        const date = new Date(dateString);
        return date.toLocaleString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            hour12: false
        }).replace(/\//g, '-');
    };

    const getProfitTypeText = (type: string) => {
        switch (type) {
            case 'fixed':
                return '固定金额';
            case 'cost':
                return '成本比例';
            case 'price':
                return '售价比例';
            default:
                return type;
        }
    };

    const getHistoryTypeText = (type: string) => {
        switch (type) {
            case 'pricing':
                return '定价历史';
            case 'adjustment':
                return '调价历史';
            default:
                return type;
        }
    };

    return (
        <div className="history">
            <form onSubmit={handleSearch} className="search-form">
                <input
                    type="text"
                    value={searchId}
                    onChange={(e) => onSearchChange(e.target.value)}
                    placeholder="输入产品ID搜索"
                />
                <select 
                    value={historyType}
                    onChange={(e) => onHistoryTypeChange(e.target.value as HistoryType)}
                >
                    <option value="all">全部历史</option>
                    <option value="pricing">定价历史</option>
                    <option value="adjustment">调价历史</option>
                </select>
                <button type="submit">搜索</button>
            </form>

            {historyError && <div className="error">{historyError}</div>}

            <div className="history-table">
                {Array.isArray(dataSource) && dataSource.length > 0 ? (
                    <table>
                        <thead>
                            <tr>
                                <th>产品ID</th>
                                <th>创建时间</th>
                                <th>OFF</th>
                                <th>类型</th>
                                <th>利润值</th>
                                <th>利润类型</th>
                                <th>成本(采购价 + 货代)</th>
                                <th>优惠券(外币)</th>
                                <th>税前售价(CNY)</th>
                                <th>重量(g)</th>
                                <th>提现手续费率</th>
                                <th>平台佣金比例</th>
                                <th>SFP服务费率</th>
                                <th>达人佣金比例</th>
                                <th>交易手续费率</th>
                                <th>增值税率</th>
                                <th>奖金返现服务费率</th>
                                <th>跨境物流成本(每10g)</th>
                                <th>汇率</th>
                                <th>买家支付运费(外币)</th>
                            </tr>
                        </thead>
                        <tbody>
                            {dataSource.map((item) => (
                                <tr key={item.id}>
                                    <td>{item.product_id}</td>
                                    <td>{formatDate(item.created_at)}</td>
                                    <td>{item.off + '%'}</td>
                                    <td>{getHistoryTypeText(item.type)}</td>
                                    <td>
                                        {item.profit_value}
                                        {item.profit_type === 'fixed' ? ' CNY' : '%'}
                                    </td>
                                    <td>{getProfitTypeText(item.profit_type)}</td>
                                    <td>{item.cost}</td>
                                    <td>{item.coupon}</td>
                                    <td>{item.y}</td>
                                    <td>{item.weight}</td>
                                    <td>{(item.withdrawal_fee_rate * 100).toFixed(2)}%</td>
                                    <td>{(item.platform_commission_rate * 100).toFixed(2)}%</td>
                                    <td>{(item.sfp_fee_rate * 100).toFixed(2)}%</td>
                                    <td>{(item.talent_commission_rate * 100).toFixed(2)}%</td>
                                    <td>{(item.transaction_fee_rate * 100).toFixed(2)}%</td>
                                    <td>{(item.vat_rate * 100).toFixed(2)}%</td>
                                    <td>{(item.bonus_cashback_rate * 100).toFixed(2)}%</td>
                                    <td>{item.logistics_cost_per_10g}</td>
                                    <td>{item.exchange_rate}</td>
                                    <td>{item.buyer_shipping_fee}</td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                ) : (
                    <div className="no-data">暂无历史记录</div>
                )}
            </div>
        </div>
    );
};

export default History; 